<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="150px"
                ref="form"
                :rules="rules">
                <el-form-item label="员工账号数量" prop="count">
                    <el-input-number
                        v-model="form.count"
                        :min="1"
                        class="input-width"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="每个账号天数" prop="duration">
                    <el-input-number
                        v-model="form.duration"
                        :min="1"
                        class="input-width"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="配额有效天数" prop="expiry_time">
                    <el-input-number
                        v-model="form.expiry_time"
                        :min="1"
                        class="input-width"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button :loading="posting" type="primary" @click="onSave">确 认</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    data() {
        return {
            posting: false,
            form: {
                company_id: this.$route.params.id,
                count: 1,
                duration: 1,
                expiry_time: '',
            },
            rules: {
                count: [
                    { required: true, message: '账号数量不能为空', trigger: 'blur' },
                ],
                duration: [
                    { required: true, message: '账号天数不能为空', trigger: 'blur' },
                ],
                expiry_time: [
                    { required: true, message: '配额有效天数不能为空', trigger: 'blur' },
                ],
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            },
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                const msg = `账号数量: ${this.form.count}  天数: ${this.form.duration}  需要${this.form.expiry_time}天内激活`;
                $ele.$confirm(msg, '请确认账号配额', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.posting = true;
                    API.post('account/application', this.form).then(() => {
                        this.$router.push({
                            name: 'AccountManage',
                            params: { id: this.$route.params.id },
                        });
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }).catch(() => { });
            });
        },
        initDateTimestamp() {
            const now = new Date();
            const today = now.toLocaleDateString().split('/').join('-');
            const date = new Date(today);
            this.dateTimestamp = date.getTime() / 1000;
            this.tomorrowDateTimestamp = this.dateTimestamp + 86400;
        },
    },
    mounted() {
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
</style>
